<template>
  
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>

</template>

<script setup>
import { computed,reactive, ref} from "@vue/composition-api";
export default {
  name: "svgIcon",
  props:{
    iconClass:{
      type:String,
      dafault:''
    },
    className:{
      type:String,
      dafault:''
    }
  },
  setup(props) {
    console.log(props.className);
    console.log(props.iconClass);
    const msg = ref("小y学前端");

    const iconName= computed(() =>{`#icon-${props.iconClass}`})
    const svgClass = computed(() =>{
      if(props.className) {
        return `svg-icon ${props.className}`
      }else{
        return `svg-icon`
      }
    })
    return {
      msg,
      iconName,
      svgClass
    };
  },
};
</script>

<style lang="scss" scoped>
  .svg-icon{
    width: 10rem;
  }
</style>
